<template>
	<div class="menu_box">
		<div class="menu_list">
			<img class="logo" src="//fes.qyerstatic.com/FgP-BkmxyKWjMKv-bAbvpXg4G2r2?imageslim" width="76" height="36">
			<div class="menu_val_box" v-for="val,index in menuList" :key='index' @mousemove="showDetails($event)" @mouseout="hiddenDerail($event)">
				<div class="pre_line"></div>
				<div class="menu_val">
					<p>{{val.name}}</p>
					<img class="icon" src="@/assets/images/下箭头.png" alt="" v-if="val.children.length">
				</div>
				<div class="menu_two" style="display: none;" v-if="val.children.length">
					<div class="menu_two_val" v-for="menuTwoVal,twoIndex in val.children" :key="twoIndex"
					@mousemove="showThreeMenu($event)" @mouseout="hiddenThreeMenu($event)">
						<img class="icon" src="@/assets/images/菜单.png" alt="" srcset="">
						<div class="name_val">{{menuTwoVal.name}}</div>
						<img class="icon" src="@/assets/images/右箭头.png" alt="" srcset="" v-if="menuTwoVal.children.length">
						<div class="menu_three"  style="display: none;" v-if="menuTwoVal.children.length">
							<div class="section_title">
								<span>热门板块</span>
								<div class="more_box">
									<span>热门板块</span>
									<img class="icon" src="@/assets/images/右箭头.png">
								</div>
							</div>
							<dl class="section_item"  v-for="menuThreeVal,threeIndex in menuTwoVal.children" :key="threeIndex">
								<dt>{{menuThreeVal.name}}</dt>
								<dd>
									<span v-for="menuFourVal,fourIndex in menuThreeVal.children" :key="fourIndex">{{menuFourVal.name}}</span>
								</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="function_box">
			<div class="search_box">
				<input class="search_input" type="text">
				<img class="search_icon" src="@/assets/images/搜索 (1).png" alt="">

			</div>
			<img class="search_icon_hidden" src="@/assets/images/搜索.png" alt="">
			|
			<img class="icon" src="@/assets/images/淘宝.png" alt="">
			<img class="icon" src="@/assets/images/QQ.png" alt="">
			<img class="icon" src="@/assets/images/微信.png" alt="">
			<img class="icon" src="@/assets/images/新浪微博.png" alt="">
			<p class="rigister">注册</p>
			<p class="login">登录</p>
		</div>
	</div>
</template>

<script>
	import indexApi from "@/api/indexApi"
	export default {
		data() {
			return {
				menuList: []
			}
		},
		mounted() {
			this.toGetMenuOne()
		},
		methods: {
			async toGetMenuOne() {
				let that = this;
				const res = await indexApi.getMenuOne()
				if(res.code == 1){
					const menuList = res.data
					for(let val of menuList){
						const menuTwoRes = await indexApi.getMenuChildren({menuId:val.id})
						val.children = menuTwoRes.data
						for(let menuTwo of val.children){
							const menuThreeRes = await indexApi.getMenuChildren({menuId:menuTwo.id})
							menuTwo.children = menuThreeRes.data
							for(let menuThree of menuTwo.children){
								const menuFourRes = await indexApi.getMenuChildren({menuId:menuThree.id})
								menuThree.children = menuFourRes.data
							}
						}
					}
					that.menuList = menuList;
				}
				// let that = this;
				// indexApi.getMenuOne().then(res => {
				// 	if (res.code == 1) {
				// 		const menuList = res.data
				// 		menuList.forEach(val=>{
				// 			indexApi.getMenuChildren({menuId:val.id}).then(menuTwoRes =>{
				// 				val.children = menuTwoRes.data
				// 				val.children.forEach(menuTwo=>{
				// 					indexApi.getMenuChildren({menuId:menuTwo.id}).then(menuThreeRes =>{
				// 						menuTwo.children = menuThreeRes.data
				// 						menuTwo.children.forEach(menuThree=>{
				// 							indexApi.getMenuChildren({menuId:menuThree.id}).then(menuFourRes =>{
				// 								menuThree.children = menuFourRes.data
				// 								that.menuList = menuList
				// 							})
				// 						})
				// 					})
				// 				})
				// 			})
				// 		})
				// 	}
				// })
			},
			showDetails(e){
				// e.currentTarget指向menu_val_box
				// e.target指向移上去的目标
				const lineDom = e.currentTarget.querySelector('.pre_line')
				if(lineDom){
					lineDom.style.height = '10%'
				}
				const MenuTwoDom = e.currentTarget.querySelector('.menu_two')
				if(MenuTwoDom){
					MenuTwoDom.style.display = 'block'
				}
			},
			hiddenDerail(e){
				const lineDom = e.currentTarget.querySelector('.pre_line')
				if(lineDom){
					lineDom.style.height = '0%'
				}
				const MenuTwoDom = e.currentTarget.querySelector('.menu_two')
				if(MenuTwoDom){
					MenuTwoDom.style.display = 'none'
				}
			},
			showThreeMenu(el){
				const dom = el.currentTarget
				dom.classList.add('menu_two_val_choosed');
				const menuThreeDom = dom.querySelector('.menu_three')
				if(menuThreeDom){
					menuThreeDom.style.display = 'block'
				}
			},
			hiddenThreeMenu(el){
				const dom = el.currentTarget
				dom.classList.remove('menu_two_val_choosed');
				const menuThreeDom = dom.querySelector('.menu_three')
				if(menuThreeDom){
					menuThreeDom.style.display = 'none'
				}
			}
		}
	}
</script>

<style>
	@import url('../../public/pubic.scss');

	.menu_box {
		min-width: 1080px;
		width: 100%;
		height: 60px;
		background: linear-gradient(180deg, rgba(0, 0, 0, .3) 10%, transparent);
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 30px;

		.menu_list {
			height: 100%;
			display: flex;
			align-items: center;

			.logo {
				margin-right: 18px;
			}

			@keyframes show {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			.menu_val_box {
				height: 100%;
				position: relative;
				animation: show .5s ease-in-out 0s forwards;

				.pre_line {
					width: 100%;
					height: 0%;
					background-color: white;
					position: absolute;
					transition: height 0.2s linear;
				}

				.menu_val {
					font-size: 16px;
					color: #fff;
					font-weight: 700;
					display: flex;
					align-items: center;
					height: 100%;
					padding: 0px 12px;

					.icon {
						width: 16px;
						height: 16px;
						transform: rotate(-360deg);
						margin-left: 4px;
					}
				}

				.menu_two::before {
					content: "";
					display: block;
					position: absolute;
					top: -12px;
					left: 22px;
					width: 0;
					height: 0;
					font-size: 0;
					border-color: transparent transparent #fff;
					border-style: solid;
					border-width: 6px 4px;
				}

				.menu_two {
					position: absolute;
					padding: 8px 0px;
					top: 55px;
					z-index: 200;
					border-radius: 4px;
					background: #fff;
					box-shadow: 0 0 3px rgba(0, 0, 0, .1);
					line-height: 30px;
					white-space: nowrap;

					.menu_two_val {
						width: auto;
						padding: 0px 8px;
						display: flex;
						align-items: center;

						.name_val {
							color: #636363;
							font-size: 16px;
							flex-shrink: 0;
							padding: 0px 4px;
						}

						.icon {
							width: 16px;
							height: 16px;
						}

						.menu_three {
							position: absolute;
							display: none;
							width: 460px;
							z-index: 200;
							border-radius: 4px;
							min-width: 100px;
							top: 0;
							left: 100%;
							padding: 4px 12px;
							background: 0 0;
							white-space: normal;
							background: #fff;
							box-shadow: 0 0 3px rgba(0, 0, 0, .1);

							.section_title {
								font-size: 16px;
								line-height: 30px;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.more_box {
									display: flex;
									align-items: center;
								}

								.icon {
									width: 16px;
									height: 16px;
								}
							}

							.section_item {
								border-top-style: solid;
								border-top: 1px dashed #ededed;
								padding-left: 90px;
								line-height: 26px;
							}

							.section_item dt {
								float: left;
								margin-left: -90px;
								padding-top: 8px;
								font-size: 16px;
								color: #323232;
							}

							.section_item dd {
								padding: 8px 0px;
							}

							.section_item dd span {
								padding: 5px 8px;
								font-size: 14px;
								line-height: 14px;
								white-space: nowrap;
								color: #636363;
							}

							.section_item dd span:hover {
								background-color: rgba(255, 0, 0, .1);
								;
							}
						}
					}

					.menu_two_val_choosed {
						background-color: rgba(255, 0, 0, .1);
					}


				}
			}
		}

		.function_box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: white;
			font-size: 12px;
			line-height: 12px;

			.search_box {
				box-sizing: border-box;
				padding: 4px 6px 4px 6px;
				opacity: 0;
				background: none;
				display: flex;
				align-items: center;
				border-radius: 3px;
				width: 20px;
				transition: all 0.2s linear;

				.search_input {
					width: 100%;
					font-size: 14px;
					border: 0;
					background-color: transparent;
					color: #636363;
					outline: none;
				}

				.search_icon {
					width: 16px;
					height: 16px;
					flex-shrink: 0;
				}
			}

			.search_box_focus {
				opacity: 1;
				background: #fff;
				width: 140px;
			}

			.search_icon_hidden {
				position: relative;
				width: 16px;
				height: 16px;
				left: -22px;
				z-index: -1;
			}

			.icon {
				width: 16px;
				height: 16px;
				margin-left: 14px;
			}

			.rigister,
			.login,
			.user_name {
				margin-left: 14px;
			}

			.avatar {
				margin-left: 24px;
				width: 30px;
				height: 30px;
				border-radius: 50%;
			}
		}
	}
</style>